<template>
  <section class="meet-wrapper">
    <home-title :data="meetData"></home-title>
    <div class="wrapper">
      <ul class="item">
        <li v-for="i in talkList1" :key="i.id" class="list">
          <h4 class="title">{{ i.title }}</h4>
          <div class="intro">
            {{ i.intro }}
          </div>
          <div class="date">
            <span>{{ i.startDate }}</span>
            <span>{{ i.endData }}</span>
          </div>
          <div class="status">
            {{ i.status ? "线下" : "线上" }}
          </div>
          <div class="total">已报名：{{ i.total }}</div>
          <div class="active">
            {{ i.active ? (i.active === 1 ? "进行中" : "已结束") : "未进行" }}
          </div>
          <div class="show">
            <nuxt-link
              v-if="i.active === 1 || i.active === 0"
              :to="i.to"
            >我要参加</nuxt-link>
          </div>
        </li>
      </ul>
      <ul class="item1">
        <li v-for="i in talkList2" :key="i.id" class="list1" :style="{flex: `0 0 ${100 / talkList2.length * 2 }%` }">
          <div class="title">
            {{ i.title }}
          </div>
          <div class="intro">
            {{ i.intro }}
          </div>
          <div>
            了解更多
          </div>
          <div>
            待进行
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      meetData: {
        title: '线上/线下活动',
        src: 'huodong.png'
      },
      talkList: [
        {
          title: '腾讯视频会议讲座(前端)',
          intro: '会议,视频,企业级,专家',
          startDate: '2021/03/28 14:00',
          endData: '2021/03/28 16:00',
          src: '',
          to: '',
          total: 10,
          status: 0,
          active: 0
        },
        {
          title: '长沙市岳麓区麓谷企业广场',
          intro: 'web开发,java,大牛,免费水果饮料,可爱的喵喵',
          startDate: '2021/03/30 9:00',
          endData: '2021/03/30 17:30',
          src: '',
          to: '',
          total: 20,
          status: 1,
          active: 0
        },
        {
          title: '微信聊天群',
          intro: '吹牛扯淡,护发股票,前景就职',
          src: '',
          startDate: '2021/03/10 10:00',
          endData: '2021/03/12 10:00',
          to: '',
          total: 40,
          status: 0,
          active: 2
        },
        {
          title: '微信聊天群2',
          intro: '吹牛扯淡,护发股票,前景就职',
          src: '',
          startDate: '2021/03/10 10:00',
          endData: '2021/03/12 10:00',
          to: '',
          total: 56,
          status: 0,
          active: 2
        },
        {
          title: '腾讯视频会议讲座(前端)',
          intro: '会议,视频,企业级,专家',
          startDate: '2021/03/28 14:00',
          endData: '2021/03/28 16:00',
          src: '',
          to: '',
          total: 10,
          status: 0,
          active: 0
        },
        {
          title: '长沙市岳麓区麓谷企业广场',
          intro: 'web开发,java,大牛,免费水果饮料,可爱的喵喵',
          startDate: '2021/03/30 9:00',
          endData: '2021/03/30 17:30',
          src: '',
          to: '',
          total: 20,
          status: 1,
          active: 0
        },
        {
          title: '微信聊天群',
          intro: '吹牛扯淡,护发股票,前景就职',
          src: '',
          startDate: '2021/03/10 10:00',
          endData: '2021/03/12 10:00',
          to: '',
          total: 40,
          status: 0,
          active: 2
        },
        {
          title: '微信聊天群2',
          intro: '吹牛扯淡,护发股票,前景就职',
          src: '',
          startDate: '2021/03/10 10:00',
          endData: '2021/03/12 10:00',
          to: '',
          total: 56,
          status: 0,
          active: 2
        },
        {
          title: '程序员单身俱乐部',
          intro: '单身男女,眼缘,匹配,活动,90后',
          src: '',
          startDate: '2021/03/28 10:00',
          endData: '2021/03/28 17:00',
          to: '',
          total: 50,
          status: 1,
          active: 1
        },
        {
          title: '撸宠pk',
          intro: '宠物,猫,狗,宠物知识,pk',
          startDate: '2021/03/28 10:00',
          endData: '2021/03/28 17:00',
          src: '',
          to: '',
          status: 0,
          active: 1
        }
      ]
    }
  },
  computed: {
    talkList1() {
      const talkList:any = this.talkList
      return talkList.filter((val:any) => val.active === 1)
    },
    talkList2() {
      const talkList:any = this.talkList
      return talkList.filter((val:any) => val.active !== 1)
    }
  }
})
</script>

<style scoped lang="scss">
.meet-wrapper {
  width: 100%;
  padding: 20px 40px;
  background-color: #fff;
  .wrapper {
    width: 100%;
    display: flex;
    .item1 {
      flex: 1;
      margin-left: 20px;
      display: flex;
      flex-wrap: wrap;
      border: 1px solid #eee;
      .list1 {
        padding: 10px;
      }
    }
    .item {
      display: flex;
      .list {
        margin: 0 10px;
        padding: 10px;
        flex: 1;
        overflow: hidden;
        &:hover {
          background: linear-gradient(0deg, #fff 0%, rgb(228, 218, 218) 100%);
        }
        .show {
          text-align: right;
        }
        .title {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .intro {
          margin-top: 5px;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .show {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
